<template>
  <h1 style="text-align: center">登记待做事项</h1>
  <hr />
  <el-form
    :model="todoParams"
    ref="form"
    :rules="rules"
    label-width="80px"
    :inline="false"
    size="normal"
  >
    <el-form-item label="待做事项" prop="content">
      <el-input v-model="todoParams.content"></el-input>
    </el-form-item>
    <el-form-item label="发布日期" prop="pub_time">
      <el-date-picker v-model="todoParams.pub_time" type="date" placeholder="选择日期" />
    </el-form-item>
    <el-form-item>
      <el-upload
        class="avatar-uploader"
        action="http://localhost:3000/api/upload"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload"
      >
        <img v-if="todoParams.imageUrl" :src="todoParams.imageUrl" class="avatar" />
        <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
      </el-upload>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">立即创建</el-button>
      <el-button @click="cancel">取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup name="">
import request from '@/utils/request'
import { ElMessage } from 'element-plus'
import { ref } from 'vue'
import { useRouter } from 'vue-router'

let todoParams = ref({
  content: '',
  pub_time: '',
  imageUrl: ''
})

let form = ref()

const validatorContent = (rule: any, value: any, callback: any) => {
  if (value.trim().length >= 4) {
    callback()
  } else {
    callback(new Error('输入的事项必须大于5个字符'))
  }
}

let rules = {
  content: [{ required: true, trigger: 'blur', validator: validatorContent }],
  pub_time: [{ required: true, trigger: 'blur' }]
}

const $router = useRouter()

const onSubmit = async () => {
  await form.value.validate()

  let result = await request.post('/todo', todoParams.value)

  if (result.data.code == '0000') {
    ElMessage.success('数据更新成功')
    cancel()
  } else {
    ElMessage.error('数据更新失败')
  }
}

const cancel = () => {
  todoParams.value = {
    content: '',
    pub_time: '',
    imageUrl: ''
  }

  form.value.clearValidate('content')
  form.value.clearValidate('pub_time')
}

const beforeAvatarUpload = (rawFile: any) => {
  if (
    rawFile.type !== 'image/jpeg' &&
    rawFile.type !== 'image/png' &&
    rawFile.type !== 'image/webp'
  ) {
    ElMessage.error('图片必须是jpg格式!')
    return false
  } else if (rawFile.size / 1024 / 1024 > 4) {
    ElMessage.error('图片大小不能超过4MB!')
    return false
  }
  return true
}

const handleAvatarSuccess = (response: any, uploadFile: any) => {
  todoParams.value.imageUrl = response.data
}
</script>

<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
